<template>
  <view
    class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden"
    :style="themeColor()"
  >
    <view class="coupon-header fixed left-0 right-0 top-0 z-10080">
      <!-- #ifdef MP-WEIXIN -->
      <view
        :style="{
          height: headStyle,
          backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',
          backgroundSize: '100%',
          backgroundPosition: 'bottom',
          backgroundRepeat: 'no-repeat',
        }"
      >
        <top-tabbar :data="param" class="top-header" />
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 || APP-PLUS -->
      <view
        class="h-[364rpx]"
        :style="{
          backgroundImage: 'url(' + img('addon/shop/coupon/coupon_uniapp.png') + ')',
          backgroundSize: 'cover',
          backgroundPosition: 'bottom',
          backgroundRepeat: 'no-repeat',
        }"
      ></view>
      <!-- #endif -->
      <view
        class="-mt-[-36rpx] px-[var(--sidebar-m)] py-[24rpx] flex items-center justify-between leading-[40rpx] text-[28rpx] bg-[var(--page-bg-color)] rounded-t-[26rpx] relative z-99999 !pl-[30rpx]"
        :class="{ '!bg-[#fff]': typePopup }"
      >
        <text
          :class="{ 'text-primary font-500': searchType == 'all' }"
          @click="searchTypeFn('all')"
          >默认排序</text
        >
        <view
          class="flex items-center"
          :class="{ 'text-primary font-500': searchType == 'create_time' }"
          @click="searchTypeFn('create_time')"
        >
          <text class="mr-[4rpx]">最新</text>
          <text
            v-if="create_time == 'asc'"
            class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1"
            :class="{ '!text-primary': searchType == 'create_time' }"
          ></text>
          <text
            v-else
            class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangxiaV6xx1"
            :class="{ '!text-primary': searchType == 'create_time' }"
          ></text>
        </view>
        <view
          class="flex items-center"
          :class="{ 'text-primary font-500': searchType == 'price' }"
          @click="searchTypeFn('price')"
        >
          <text class="mr-[4rpx]">价格</text>
          <text
            v-if="price == 'asc'"
            class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangshangV6xx1"
            :class="{ '!text-primary': searchType == 'price' }"
          ></text>
          <text
            v-else
            class="text-[18rpx] text-[var(--text-color-light6)] nc-iconfont nc-icon-a-xiangxiaV6xx1"
            :class="{ '!text-primary': searchType == 'price' }"
          ></text>
        </view>
        <view
          class="flex items-center"
          :class="{ 'text-primary font-500': searchType == 'type' }"
          @click="searchTypeFn('type')"
        >
          <view
            class="w-[2rpx] h-[28rpx] bg-gradient-to-b from-[#333] to-[#fff] mr-[20rpx] flex-shrink-0"
          ></view>
          <text class="mr-[10rpx]">筛选</text>
          <text
            class="nc-iconfont color-[var(--text-color-light6)] nc-icon-shaixuanV6xx text-[28rpx]"
          ></text>
        </view>
      </view>
    </view>
    <mescroll-body
      ref="mescrollRef"
      :top="mescrollTop"
      :down="{ use: false }"
      :up="{ empty: { use: true, tip: '暂无优惠券', btnText: '去逛逛' } }"
      height="auto"
      @init="mescrollInit"
      @up="getShopCouponListFn"
      @emptyclick="redirect({ url: '/addon/shop/pages/goods/list' })"
    >
      <view v-if="list.length" class="pb-[var(--top-m)] sidebar-margin">
        <template v-for="(item, index) in list">
          <view
            v-if="item.btnType === 'collected'"
            class="flex items-center relative w-[100%] rounded-[var(--rounded-big)] overflow-hidden bg-[#fff] py-[20rpx] background-size"
            :class="{ 'mt-[var(--top-m)]': index }"
            :style="{
              backgroundImage: 'url(' + img('addon/shop/coupon/coupn_loot.png') + ')',
            }"
            @click="toDetail(item.id)"
          >
            <view
              class="box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center"
            >
              <view class="w-[164rpx] box-border flex justify-center">
                <view class="flex items-baseline text-[var(--price-text-color)]">
                  <text
                    class="text-[28rpx] leading-[34rpx] text-center font-400 price-font mr-[4rpx]"
                    >￥</text
                  >
                  <text
                    class="text-[54rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] price-font"
                    >{{ item.coupon_price }}</text
                  >
                </view>
              </view>
              <view class="flex-1 box-border ml-[10rpx]">
                <view class="text-[26rpx] leading-[42rpx] text-left font-500">
                  <text v-if="item.min_condition_money === '0.00'">无门槛</text>
                  <text v-else>满{{ item.coupon_min_price }}元可用</text>
                </view>
                <view class="mt-[10rpx] text-left flex items-center">
                  <text
                    class="w-[80rpx] text-center bg-[var(--primary-color-light)] whitespace-nowrap text-[var(--primary-color)] text-[18rpx] h-[30rpx] leading-[30rpx] rounded-[16rpx] mr-[10rpx] flex-shrink-0"
                    >{{ item.type_name }}</text
                  >
                  <text
                    class="text-[24rpx] truncate max-w-[190rpx] leading-[30rpx] text-[var(--text-color-light6)]"
                    >{{ item.title }}</text
                  >
                </view>
                <view
                  class="w-[100%] mt-[10rpx] text-[20rpx] leading-[30rpx] text-[var(--text-color-light6)]"
                >
                  <text v-if="item.valid_type == 1"
                    >领取之日起{{ item.length || "" }}天内有效</text
                  >
                  <text v-else>
                    有效期至{{
                      item.valid_end_time ? item.valid_end_time.slice(0, 10) : ""
                    }}</text
                  >
                </view>
              </view>
            </view>
            <view class="pr-[20rpx] pl-[34rpx]">
              <button
                class="flex-center"
                :style="{
                  width: '150rpx',
                  height: '60rpx',
                  color: '#fff',
                  fontSize: '24rpx',
                  padding: '0',
                  backgroundColor: 'var(--primary-help-color4)',
                  border: 'none',
                  opacity: '1',
                  borderRadius: '30rpx',
                }"
                disabled
              >
                已领完
              </button>
            </view>
            <view
              class="absolute top-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[var(--page-bg-color)]"
            ></view>
            <view
              class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[var(--page-bg-color)]"
            ></view>
          </view>
          <view
            v-else
            class="flex items-center relative w-[100%] rounded-[var(--rounded-big)] overflow-hidden bg-[#fff] py-[20rpx] background-size"
            :class="{ 'mt-[var(--top-m)]': index }"
            @click="toDetail(item.id)"
          >
            <view
              class="relative box-border flex-1 border-0 border-r-[1px] border-[#FFDCDC] border-dashed flex items-center pl-[10rpx]"
            >
              <view class="w-[164rpx] box-border flex justify-center">
                <view class="flex items-baseline text-[var(--price-text-color)]">
                  <text
                    class="text-[28rpx] leading-[34rpx] text-center font-400 price-font mr-[4rpx]"
                    >￥</text
                  >
                  <text
                    class="text-[54rpx] font-500 text-left leading-[70rpx] max-w-[136rpx] price-font"
                    >{{ item.coupon_price }}</text
                  >
                </view>
              </view>
              <view class="flex-1 box-border ml-[10rpx]">
                <view class="text-[26rpx] leading-[42rpx] text-left font-500">
                  <text v-if="item.min_condition_money === '0.00'">无门槛</text>
                  <text v-else>满{{ item.coupon_min_price }}元可用</text>
                </view>
                <view class="mt-[10rpx] text-left flex items-center">
                  <text
                    class="w-[80rpx] bg-[var(--primary-color-light)] whitespace-nowrap text-[var(--primary-color)] text-[18rpx] h-[30rpx] leading-[30rpx] text-center rounded-[16rpx] mr-[10rpx] flex-shrink-0"
                    >{{ item.type_name }}</text
                  >
                  <text
                    class="text-[24rpx] truncate max-w-[190rpx] leading-[30rpx] text-[var(--text-color-light9)]"
                    >{{ item.title }}</text
                  >
                </view>
                <view
                  class="w-[100%] mt-[6rpx] text-[20rpx] leading-[30rpx] text-[var(--text-color-light9)]"
                >
                  <text v-if="item.valid_type == 1"
                    >领取之日起<text>{{ item.length || "" }}</text
                    >天内有效</text
                  >
                  <text v-else>
                    有效期至<text>{{
                      item.valid_end_time ? item.valid_end_time.slice(0, 10) : ""
                    }}</text></text
                  >
                </view>
              </view>
            </view>
            <view
              v-if="item.btnType === 'collecting'"
              @click.stop="collecting(item.id, index)"
              class="pr-[20rpx] pl-[34rpx]"
            >
              <button
                class="flex-center"
                :style="{
                  width: '150rpx',
                  height: '60rpx',
                  color: '#fff',
                  fontSize: '24rpx',
                  padding: '0',
                  backgroundColor: 'var(--primary-color)',
                  border: 'none',
                  borderRadius: '30rpx',
                }"
              >
                立即领取
              </button>
            </view>
            <view
              v-if="item.btnType === 'using'"
              @click.stop="toLink(item.id)"
              class="pr-[20rpx] pl-[34rpx]"
            >
              <button
                class="flex-center"
                :style="{
                  width: '150rpx',
                  height: '60rpx',
                  color: 'var(--primary-color)',
                  fontSize: '24rpx',
                  padding: '0',
                  backgroundColor: 'transparent',
                  border: '2rpx solid var(--primary-color)',
                  borderRadius: '30rpx',
                }"
              >
                去使用
              </button>
            </view>
            <view
              class="absolute top-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-br-[20rpx] rounded-bl-[20rpx] bg-[var(--page-bg-color)]"
            ></view>
            <view
              class="absolute bottom-0 right-[190rpx] h-[10rpx] w-[20rpx] rounded-tr-[20rpx] rounded-tl-[20rpx] bg-[var(--page-bg-color)]"
            ></view>
          </view>
        </template>
        <!-- <view :style="{'height': nullPageHeight}" class="noData bg-[#fff] rounded-[var(--rounded-big)] flex items-center justify-center"> -->
        <!-- </view> -->
      </view>
      <!-- <view> -->
      <!-- </view> -->
    </mescroll-body>

    <u-popup
      :show="typePopup"
      mode="top"
      @close="typePopup = false"
      :customStyle="{ top: typePopupTopVal }"
      :safeAreaInsetBottom="false"
    >
      <view @touchmove.prevent.stop>
        <scroll-view
          :scroll-x="true"
          scroll-with-animation
          :scroll-into-view="'id' + (subActive ? subActive - 1 : 0)"
          class="px-[var(--sidebar-m)] box-border bg-white rounded-b-[26rpx]"
        >
          <view
            class="items-center flex py-[20rpx] border-0 border-t-[2rpx] border-solid border-[#F0F2F8]"
          >
            <text
              class="flex-shrink-0 w-[120rpx] h-[50rpx] text-[24rpx] leading-[50rpx] text-center text-[#333] bg-[var(--temp-bg)] rounded-[30rpx] border-box mr-[20rpx] border-[2rpx] border-solid border-[#F8F9FD]"
              :class="{
                '!text-primary !border-primary !bg-[var(--primary-color-light)] font-500':
                  item.value == curType,
              }"
              v-for="(item, index) in typeList"
              :key="index"
              :id="'id' + index"
              @click="typeClick(index, item.value)"
              >{{ item.label }}</text
            >
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, getCurrentInstance, watch } from "vue";
import { img, redirect, pxToRpx, getToken } from "@/utils/common";
import { topTabar } from "@/utils/topTabbar";
import { getShopCouponList, getCoupon, getMyCouponType } from "@/addon/shop/api/coupon";
import MescrollBody from "@/components/mescroll/mescroll-body/mescroll-body.vue";
import useMescroll from "@/components/mescroll/hooks/useMescroll.js";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import useMemberStore from "@/stores/member";
import { useLogin } from "@/hooks/useLogin";
import { t } from "@/locale";

const { mescrollInit, downCallback, getMescroll } = useMescroll(
  onPageScroll,
  onReachBottom
);
// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/********* 自定义头部 - start ***********/
const topTabarObj = topTabar();
let param = topTabarObj.setTopTabbarParam({ title: "优惠券列表" });
/********* 自定义头部 - end ***********/

// 头部图片的高度
const headStyle = computed(() => {
  let style =
    pxToRpx(Number(menuButtonInfo.height)) +
    pxToRpx(menuButtonInfo.top) +
    pxToRpx(8) +
    364 +
    "rpx";
  return style;
});

const mescrollTop = computed(() => {
  let style = Object.keys(menuButtonInfo).length
    ? pxToRpx(Number(menuButtonInfo.height)) +
      pxToRpx(menuButtonInfo.top) +
      pxToRpx(8) +
      416 +
      "rpx"
    : "416rpx";
  return style;
});

const instance = getCurrentInstance();
let typePopupTopVal = ref();
const typePopupTopFn = () => {
  nextTick(() => {
    setTimeout(() => {
      const query = uni.createSelectorQuery().in(instance);
      query
        .select(".coupon-header")
        .boundingClientRect((data: any) => {
          typePopupTopVal.value = data.height + "px";
        })
        .exec();
    });
  });
};
typePopupTopFn();

// // 获取空页面高度
// const nullPageHeight = computed(() => {
// 	let hei = '';
// 	// #ifndef  H5
// 	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
// 	hei = `calc(100vh - ${mescrollTop.value} - 40rpx)`
// 	// #endif
// 	// #ifdef H5 || APP-PLUS
// 	// 屏幕高度 - 图片高度 - 上下padding + 内容框上移高度 - 苹果手机安全距离
// 	hei = `calc(100vh - 416rpx)`
// 	// #endif
// 	return hei
// })

const list: any = ref<Array<Object>>([]);
const loading = ref<boolean>(true);
const memberStore = useMemberStore();
const userInfo = computed(() => memberStore.info);

watch(
  () => userInfo.value,
  (newValue, oldValue) => {
    if (newValue) {
      if (getMescroll()) getMescroll().resetUpScroll();
    }
  },
  { immediate: true, deep: true }
);

const getShopCouponListFn = (mescroll: any) => {
  loading.value = true;
  let data: object = {
    page: mescroll.num,
    limit: mescroll.size,
    order: searchType.value === "all" ? "" : searchType.value,
    sort: searchType.value == "price" ? price.value : create_time.value,
    type: curType.value || "",
  };

  getShopCouponList(data)
    .then((res: any) => {
      let newArr = (res.data.data as Array<Object>).map((el: any) => {
        if (el.receive_type == 2) {
          //receive_type 后台发放
          el.btnType = "collected"; //已领完
        } else {
          if (!getToken()) {
            if (el.sum_count != -1 && el.receive_count === el.sum_count) {
              el.btnType = "collected"; //已领完
            } else {
              el.btnType = "collecting"; //领用
            }
          } else {
            if (el.sum_count != -1 && el.receive_count === el.sum_count) {
              el.btnType = "collected"; //已领完
            } else if (el.is_receive && el.limit_count === el.member_receive_count) {
              el.btnType = "using"; //去使用
            } else {
              el.btnType = "collecting"; //领用
            }
          }
        }
        return el;
      });
      //设置列表数据
      if (mescroll.num == 1) {
        list.value = []; //如果是第一页需手动制空列表
      }
      list.value = list.value.concat(newArr);
      mescroll.endSuccess(newArr.length);
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
      mescroll.endErr(); // 请求失败, 结束加载
    });
};

const collecting = (coupon_id: any, index: number) => {
  if (!userInfo.value) {
    useLogin().setLoginBack({ url: "/addon/shop/pages/coupon/list" });
    return false;
  }
  getCoupon({ coupon_id, number: 1, type: "receive" }).then((res: any) => {
    if (res.code > 0) {
      list.value[index].member_receive_count += 1;
      list.value[index].receive_count += 1;
      if (
        list.value[index].member_receive_count == list.value[index].limit_count ||
        (list.value[index].sum_count != -1 &&
          list.value[index].receive_count === list.value[index].sum_count)
      ) {
        list.value[index].btnType = "using";
      }
    }
  });
};

const toDetail = (coupon_id: any) => {
  redirect({ url: "/addon/shop/pages/coupon/detail", param: { coupon_id } });
};
const toLink = (coupon_id: any) => {
  redirect({ url: "/addon/shop/pages/goods/list", param: { coupon_id } });
};

// 优惠劵
const price = ref("");
const create_time = ref("");
const searchType = ref("all");
// 类型
const subActive = ref<number>(0);
const curType = ref("");
const typeList = ref<Array<Object>>([]);
const typePopup = ref<boolean>(false);
const getMyCouponTypeFn = () => {
  getMyCouponType().then((res: any) => {
    const obj = { label: "全部", value: "" };
    typeList.value.push(obj);
    typeList.value = typeList.value.concat(res.data);
  });
};
onLoad(() => {
  getMyCouponTypeFn();
});

const typeClick = (index: number, data: any) => {
  subActive.value = index;
  curType.value = data;
  list.value = [];
  getMescroll().resetUpScroll();
  typePopup.value = false;
};
// 筛选
const searchTypeFn = (type: any) => {
  searchType.value = type;
  if (type == "all") {
    create_time.value = "";
    price.value = "";
  }
  if (type == "price") {
    create_time.value = "";
    if (price.value) {
      price.value = price.value == "asc" ? "desc" : "asc";
    } else {
      price.value = "asc";
    }
  }
  if (type == "create_time") {
    price.value = "";
    if (create_time.value) {
      create_time.value = create_time.value == "asc" ? "desc" : "asc";
    } else {
      create_time.value = "asc";
    }
  }
  if (type == "type") {
    create_time.value = "asc";
    price.value = "asc";
    typePopup.value = true;
  } else {
    typePopup.value = false;
    list.value = [];

    getMescroll().resetUpScroll();
  }
};
</script>

<style lang="scss" scoped>
button {
  box-sizing: border-box;

  &::after {
    display: none;
  }
}

.background-size {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 27%;
}

:deep(.u-popup .u-popup__content) {
  border-bottom-left-radius: 26rpx;
  border-bottom-right-radius: 26rpx;
}

:deep(.mescroll-empty) {
  margin-top: 0 !important;
}
</style>
